import React, { useEffect, useRef } from "react";
import { Checkbox, Button } from "antd";
import { ITodoList } from "../model/todoList";
import { DeleteOutlined } from "@ant-design/icons";

const Content = (props: { data: Array<ITodoList>; [key: string]: any }) => {
  const { data, handleChange, handleDel } = props;
  const ulRef = useRef<HTMLUListElement>(null);
  useEffect(() => {
    // console.log(ulRef.current);
  });
  return (
    <div className="mt-[10px] pb-[10px]  border-blue-200 border-b-[2px] w-[100%]">
      <ul ref={ulRef}>
        {data?.map((item, index) => {
          return (
            <li key={item.id}>
              <Checkbox
                className="mr-2"
                checked={item.done}
                onChange={(event) => handleChange(event, item)}
              ></Checkbox>
              <span
                style={{ textDecoration: item.done ? "line-through" : "none" }}
                // style={{ color: item.done ? "red" : "blue" }}
              >
                {item.title}
              </span>
              <Button
                className="w-4 h-4 ml-2"
                danger
                onClick={() => handleDel(index)}
              >
                <DeleteOutlined />
              </Button>
            </li>
          );
        })}
      </ul>
    </div>
  );
};

export default Content;
